import * as React from 'react';
import { PullToRefresh, List, Checkbox, Button, Dialog, Toast } from 'antd-mobile';
import Edit from '@/imgs/svg/edit.svg';
import './index.module.scss';
import { useNavigate } from 'react-router-dom';
import { passengersProps } from '../types';
const { useEffect, useState } = React;


export default function Passengers(props: passengersProps) {
  const { show, passengersList, getSelectedPassenger } = props;
  const navigate = useNavigate();
  const [selectValue, setSelectValue] = useState<string[]>([]);
  const editPassenger = (val: string) => {
    navigate(`/passengerDetail?bookerId=${val}`);
  };
 const filter = (val:string)=>{
   return val.substr(0, 6) + '********' + val.substr(14, 19)
 }
  useEffect(() => {
    getSelectedPassenger(selectValue)
  }, [selectValue])
  return (
    <div styleName="passengers-list">
      <Checkbox.Group
        value={selectValue}
        onChange={(val) => {
          setSelectValue(val as string[]);
        }}
      >
        <List styleName="list-item">
          <List.Item styleName="list-item">
            <div styleName="top-notice">下拉可刷新乘客列表</div>
          </List.Item>
          {passengersList.map((item: any, index: number) => (
            <List.Item key={index}>
              <div styleName="item-detail flex-center">
                <div styleName="left">
                  <div
                    styleName="edit-button"
                    onClick={() => editPassenger(item.bookerId)}
                  >
                    <Edit />
                  </div>
                </div>
                <div styleName="middle flex-column">
                  <div styleName="name-type flex-center">
                    <div styleName="name">{item.booker}</div>
                    <div styleName="type flex-center">{item.ticketType}</div>
                  </div>
                  <div styleName="card-number">
                    身份证 <span>{filter(item.idCard )}</span>
                  </div>
                </div>
                <div styleName="right">
                  {show ? <Checkbox
                    styleName="check"
                    key={item.booker}
                    value={item.bookerId}
                  ></Checkbox> : ""}
                </div>
              </div>
            </List.Item>
          ))}
        </List>
      </Checkbox.Group>
    </div>
  );
}
